<template>
  <div class="public">
    <headTop></headTop>
    <div class="heightvh">

      <div class="schedule">
        <div class="grip">
          <div class="sign blue pl" style="padding-right:1px">
            1
          </div>
          <div class="words">
            主题
          </div>
        </div>
        <div class="grip" >
          <div class="sign green pl " style="padding-right:1px">
            2
          </div>
          <div class="words">
            基本信息
          </div>
        </div>
        <div class="grip">
          <div class="sign orange pl " style="padding-right:1px">
            3
          </div>
          <div class="words ">
            报名设置
          </div>
        </div>
        <div class="grip">
          <div class="sign blue pr">
            4
          </div>
          <div class="words">
            附加项
          </div>
        </div>
        <div class="grip">
          <div class="sign green">
            5
          </div>
          <div class="words">
            签到
          </div>
        </div>
        <div class="grip ">
          <div class="sign  orange">
            6
          </div>
          <div class="words">
            奖励
          </div>
        </div>
        <div class="grip">
          <div class="sign blue " style="padding-left:1px">
            7
          </div>
          <div class="words">
            详情
          </div>
        </div>
      </div>
      <div class="file">
        <div class="theme">
          <mt-field placeholder="请输入活动名字" v-model="sentData.activities.Theme"></mt-field>

          <mt-field placeholder="请输入活动标签，以逗号分隔" v-model="sentData.activities.Tags"></mt-field>
        </div>
        <div class="basic_data">
          <div class="headline">
            <span class="sign green pl">
              2
            </span>
            <span class="words green_word">
              基本信息
            </span>
          </div>
          <div class="fill_in">
            <ul>
              <li>
                活动开始时间
                <el-date-picker v-model="sentData.activities.StartTime" type="datetime" placeholder="选择日期时间" >
                </el-date-picker>
                <span class="iconfont icon-jiantou-copy">

                </span>
              </li>
              <li>
                活动结束时间
                <el-date-picker v-model="sentData.activities.EndTime" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
                <span class="iconfont icon-jiantou-copy"></span>
              </li>
               <li class="nonepadding"  @click="setPosition">
                 活动地点
                 <div class="siteName">{{sentData.activities.SiteName}}</div> 
               <span class="iconfont icon-jiantou-copy"></span>
                </li>
              <li>
                活动封面
                <input type="file" name="" class="lii">
                <img src="" alt="" class="pictrue" ref="CoverPicture">
                <span class="iconfont icon-jiantou-copy"></span>
              </li>

            </ul>

          </div>
        </div>
        <div class="apply">
          <div class="headline">
            <span class="sign orange pl">
              3
            </span>
            <span class="words orange_word">
              报名设置
            </span>
          </div>
          <div class="fill_in single">
            <div class="amount">
            <mt-field label="报名数量" placeholder="输入报名数量，空则为无限制" v-model="sentData.activities.JoinerLimitNumber">
              <span class="iconfont icon-jiantou-copy"></span>
            </mt-field>
             </div>
            <div class="switch">
              <div class="words">
                报名审核
              </div>
              <div class="on-off clearfix">
                <mt-switch v-model="sentData.activities.IsNeedApproval"></mt-switch>
              </div>
            </div>
            <div class="switch">
              <div>
                是否需要先参加展会预登记
              </div>

              <div class="on-off clearfix">
                <mt-switch v-model="sentData.activities.IsNeedPreregister"></mt-switch>
              </div>

            </div>

          </div>
          <div class="tip">提示：勾选先参加展会预登记，即可在后台查看、下载报名者的预登记采集信息（如姓名、手机、单位等）</div>
          <div class="addition">
            <div class="headline">
              <span class="sign blue pl">
                4
              </span>
              <span class="words blue_word">
                报名附加填写项
              </span>
            </div>
            <div class="fill_in" v-if="sentData.questions.length!=0">
              <ul>
                <li  v-for="(item,index) in this.sentData.questions" @click="changeProblem(index)">
                  {{item.Question}}
                  
                  <span class="iconfont icon-jiantou-copy"></span>
                </li>
              </ul>
            </div>
            <div class="add_news" @click="addProblem">
              <span class="iconfont icon-jia" ></span>
              <span>添加新项</span>
            </div>
          </div>
          <!-- 签到设置 -->
          <div class="sign_in">
            <div class="headline">
              <span class="sign green pl">
                5
              </span>

              <span class="words green_word">
                签到设置
              </span>
            </div>
            <div class="fill_in">
              <div class="switch">
                <div>
                  现场扫码签到
                </div>

                <div class="on-off clearfix">
                  <mt-switch v-model="sentData.activities.IsNeedScanToSignUp"></mt-switch>
                </div>

              </div>
                <div class="switch">
                <div>
                 现场摇一摇敲到
                </div>

                <div class="on-off clearfix">
                  <mt-switch v-model="sentData.activities.IsNeedYaoyao"></mt-switch>
                </div>
              </div>        
            </div>
          </div>

          <!-- 奖励设置 -->
          <div class="award">
            <div class="headline">
              <span class="sign orange pl">
                6
              </span>
              <span class="words orange_word">
                奖励设置
              </span>
            </div>

            <div class="fill_in"  v-if="sentData.rewardRule.length!=0">
             <ul>
                <li  v-for="(item,index) in this.sentData.rewardRule" @click="changeRule(index)">
                  {{item.theme}}
                  
                  <span class="iconfont icon-jiantou-copy"></span>
                </li>
              </ul>
            </div>
            <div class="add_news" @click="addAward">
              <span class="iconfont icon-jia"></span>
              <span>添加新项</span>
            </div>
          </div>
        </div>
      </div>

      <div class="award">
        <div class="headline">
          <span class="sign blue pl">
            7
          </span>
          <span class="words orange_word">
            活动详情
          </span>
        </div>
      </div>
      <div class="event_details">
        <div class="compile">
          点击编辑
        </div>
      </div>
      <footer>
        <div class="save">保存</div>
        <div class="confirm" v-on:click="publish"> 发布</div>
      </footer>

    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import { AddActivities } from 'src/servise/getData';
import { state } from 'vuex'
import MyPlugin from 'src/lib/resize.min'
import addAward from 'src/page/exhibitor/add_award/add_award'
import { PublishInitdata } from 'src/store/publishData';  //初始版本的initdata  不能删
import { publishData } from 'src/testData/publishData';
import { Toast } from 'mint-ui'




import Qs from 'qs'
Vue.use(MyPlugin)
Vue.use(ElementUI)

export default {
  components: {
    addAward,
    
  },

  data() {
    return {
      pickerOptions1: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },

      sentData:'',
    };
  },
  created() {

    console.log(publishData);

   if(sessionStorage.loaded==undefined){
  
  console.log(PublishInitdata);
   this.sentData=publishData;

 
 
   }else{
  
       this.sentData= JSON.parse(sessionStorage.PublishInit);

   
   }


 

  },

  mounted() {

  
    let input = document.querySelector(".lii")
    input.addEventListener('change', function(e) {
      canvasResize(this.files[0], {
        crop: false,
        quality: 0.9,
        rotate: 0,
        callback(baseStr) {
       
          this.CoverPicture = baseStr;
          var tupian = document.querySelector('img').src = baseStr;

        }
      })
    })
    
  },
  methods: {

    hint() {
      MessageBox.alert('发布成功').then(action => {
        this.$router.push({ path: '/dialogue' })
      });
    },

   addProblem(){
       let savedata=JSON.stringify(this.sentData)
       sessionStorage.PublishInit = savedata;
       sessionStorage.loaded=true;
       console.log(savedata)
        this.$router.push({ path: '/addition_problem' })
   },


   changeProblem(index){
     sessionStorage.EProblemIndex=index;
     console.log(sessionStorage.EProblemIndex)
      this.$router.push({ path: '/change_problem' })
  
   },
   
    addAward() {
      let savedata=JSON.stringify(this.sentData)
      
      
      sessionStorage.setItem('PublishInit',savedata)
      
   sessionStorage.loaded=true;
      this.$router.push({ path: '/add_award' })
    },

    changeRule(index){
      sessionStorage.EProRuleIndex=index;
       this.$router.push({ path: '/change_award' })
  

    } ,
    setPosition(){
       sessionStorage.PublishInit=JSON.stringify(this.sentData);
       
       sessionStorage.loaded=true;
      console.log(sessionStorage.PublishInit)
        this.$router.push({ path: '/set_action_position' })
    },


    publish() {
      // const verify = [
      //   this.sentData.eventName,
      //   this.sentData.label,
      //   this.sentData.startTime,
      //   this.sentData.endTime,
      //   this.sentData.site,
      //   this.sentData.CoverPicture,

      // ]


      // for (let index = 0; index < verify.length; index++) {
      //   if(verify[index]==''){
      //    console.log('请填写完整信息')
      //   }

      // }
      


 

      this.sentData.activities.CoverPicture=this.$refs.CoverPicture.src;  

      this.sentData.rewardRule.Condition=='选项1'?this.sentData.rewardRule.Condition=1:this.sentData.rewardRule.Condition=2;
      this.sentData.activities.PublishStatus=1;    //直接发布状态

        this.sentData.activities.IsNeedYaoyao==true? this.sentData.activities.IsNeedYaoyao=1: this.sentData.activities.IsNeedYaoyao=0;


      // this.sentData.activities.IsNeedApproval==1? this.sentData.activities.IsNeedApproval=1: this.sentData.activities.IsNeedApproval=0
      // this.sentData.activities.IsNeedPreregister==1?this.sentData.activities.IsNeedPreregister=1:this.sentData.activities.IsNeedPreregister=0
      // this.sentData.activities.IsNeedScanToSignUp==1?this.sentData.activities.IsNeedScanToSignUp=1:this.sentData.activities.IsNeedScanToSignUp=0
       console.log(JSON.stringify(this.sentData))
       this.$http.post(AddActivities,Qs.stringify({"": JSON.stringify(this.sentData)})).then(
         (res) => {
            if(res.data.ErrorCode==0){
                sessionStorage.loaded='undefined';

                sessionStorage.removeItem("loaded");
                this.$router.push({ path: '/release_succeed' })
            }else{
              console.log(res)
                   Toast({
              message: res.data.ErrorMessage,
              position: 'middle',
              duration: 800
            })
            }
           
         }
       )
  
    
  
      

    },

    savePublish(){
      console.log(this.sentData)
       this.sentData.rewardRule.PublishStatus=true;   //活动保存
    }
  }

}
</script>

<style lang="stylus" scoped>
 @import './icon/iconfont.css';

  .public
  
    padding-top 0.1932rem
 

  .schedule
    display flex
    position relative
    justify-content center
    align-items center
    .grip
      flex 1
      height 40px
      padding-top 5px
      .sign
        display flex
        justify-content center
        align-items center
        width 16px
        height 16px
        font-size 12px
        margin 0 auto
        background-color #D8D8D8
        border-radius 11px
        color #fff
       
        
      .words
        font-size 12px
        color #666666 
        text-align center
    .blue
      background-color #2A96F5  !important
    .green
      background-color #00C9C2 !important
    .orange
      background-color #F49727 !important
    .pr
      padding-right 1px
    .pl
      padding-left 1px
    .mint-cell
      min-height 1.087rem
  .mint-cell-wrapper
     
      padding: 0rem 0.3623rem;
    a:last-child
      .mint-cell-wrapper
        border none  
    .mint-field-core
      font-size 15px
      
  .headline
    display flex
    line-height 30px
    align-items center
    padding 0 15px
    padding-top: 5px;
    .sign
      display flex
      justify-content center
      align-items center
      width 16px
      height 16px
      font-size 12px
      background-color #D8D8D8
      border-radius 11px
      color #fff
      
     
    .words
      font-size 13px
      padding-left 5px
    .blue
        background-color #2A96F5  !important
    .green
        background-color #00C9C2 !important
    .orange
        background-color #F49727 !important
    .blue_word
        color #2A96F5
    .green_word
        color #00C9C2
    .orange_word
        color #F49727
  .fill_in
    background-color #fff
    font-size 15px
    

    li 
      height 44px
      display flex
      align-items center
      position relative
      font-size 15px
      border-bottom 1px solid #E5E5E5
      padding: 0 15px; 
      position relative
      
      .lii
        width 50%
        position absolute
        right 20px
        bottom: 8px;
        opacity 0
        z-index 99
      .pictrue
        width 30px
        height 30px
        position absolute
        right 44px
        bottom: 6px;
      span 
        display inline-block
        width 8px
        height 16px
        position absolute
        right 20px
        top 50%
        transform translateY(-8px)
        color #999999
        font-size 17px
    li:last-child
      border-bottom none
    .mint-cell-wrapper
      font-size 15px
    .switch
      display flex
      padding 0 15px
      height 45px
      border-bottom 1px solid #E5E5E5
      display flex
      align-items center
      .words
        flex  1  
      .on-off
        flex 1
        padding-right: 8px;
        .mint-switch
          float right
    
    .switch:last-child
      border-bottom none
  .tip
      font-size 12px
      color #2A96F5
      padding  0 15px
      padding-top 3px 
      margin-bottom: 8px;   
  .single 
    .mint-field-core
      text-align right
  .mint-switch
  .add_new
    height 45px
  .add_news
     height 43px
     font-size 13px
     display flex
     justify-content center
     align-items center
     background-color #ffffff
     border-top 1px solid #E5E5E5
     span 
       color #EF5B49
       margin-left 4px

    .mint-switch-core
      width 35px
      height 21px
    .mint-switch-core::before
      width 33px
      height 19px
    .mint-switch-core::after
      width 19px
      height 19px
    .mint-switch-input:checked + .mint-switch-core
      border-color: #2A96F5;
      background-color: #2A96F5;
  .mint-switch-input:checked + .mint-switch-core::after {
    -webkit-transform: translateX(16px);
    transform: translateX(16px);
}
  .event_details
    background-color #ffffff
    padding 30px
    height 100px
    .compile
      width 100%
      border 1px solid #2A96F5
      height 100%
      font-size 18px
      display flex
      justify-content center
      align-items center
      color #2A96F5 

  body
    padding-bottom 50px
  footer 
    height 50px
    display flex
   
    font-size 18px
    bottom 0px
    width 100%
    .save
      flex 1
      background-color  #00C9C2
      color #ffffff
      height 50px
      display flex
      justify-content center
      align-items center
    .confirm
      display flex
      justify-content center
      align-items center
      flex 2
      background-color  #2A96F5
      color #ffffff 
      height 50px
  .el-input__inner
    border: none !important
  .el-date-editor 
    
    text-align: right; 
    input 
      padding-right 0 !important
      text-align: right; 

   
  .el-input__icon 
     display none !important
  ul
    li
      .el-date-editor.el-input {
        width: 193px; 
        height: 100%;
        display: flex;
        justify-items: center;
        align-items: center;
        padding-top 2px
        position: absolute;
        right: 42px;
        top:0;
    }
  .site
     min-height: 43px;
     background: none !important
     input
      text-align right
      padding-right 30px

.add
  display flex
  position fixed
  bottom 0
  width 100%
  height 50px
  .left
    flex 2
    background-color  #E5E5E5
    display flex
    justify-content center
    align-items center
    .word
      font-size 12px
      text-align center
      color: #333333;
  .right
    flex 3
    background-color #2A96F5
    display flex
    align-items center
    display flex
    justify-content center
    align-items center
    .word
      font-size 12px
      text-align center
      color: #ffffff;
.preview
  margin 25px 12px
  padding-bottom 15px  
  .title 
    color #2A96F5
    font-size 15px
    text-align center
    padding 12px 0
  .inner
    text-align center
    font-size 15px

.siteName
    right: 42px;
    position: absolute;
    bottom: 0px;
    /* height: 100%; */
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;


</style>
<style lang="stylus" >
.public
  .mint-switch-core
        width 35px
        height 21px
      .mint-switch-core::before
        width 33px
        height 19px
      .mint-switch-core::after
        width 19px
        height 19px
      .mint-switch-input:checked + .mint-switch-core
        border-color: #2A96F5;
        background-color: #2A96F5;
    .mint-switch-input:checked + .mint-switch-core::after 
      -webkit-transform: translateX(16px);
      transform: translateX(16px);
     
     .el-date-editor input 
      padding-right: 0 !important;
      text-align: right;
     .el-input__icon
      display none
     .el-date-editor
      
  .mint-cell-wrapper
      background-image: none ; 
  .mint-cell
      border-bottom: 1px solid #e5e5e5;
  .nonepadding
    .mint-cell
      border none
  .nonepadding
   .mint-cell-wrapper
      padding 0 !important
   a 
     width 100%
     padding-right: 30px;
   input 
      text-align right 
  .fill_in 
    a 
      width 100%
      
      input 
        text-align right
  .amount
    .mint-cell-wrapper
      padding 0 15px
    input 
      padding-right: 15px;
    .mint-cell
      border none
  .mint-cell-title
    width 140px
.mint-toast 
  padding 12px
  .mint-toast-text
    color #fff
    font-size 16px
      

</style>